Netlify CMSを試してみた

https://decapcms.org/

以下公開当時の内容となります。

---

しばたです。

AWS Amplify ConsoleやGitHub Pages、Netlifyなどの静的なサイトをホストするサービスはいろいろありますが、非エンジニアによる運用を考えた場合(ヘッドレスではない)CMSの様な管理画面が欲しくなります。

調べてみたところNetlifyではホストしているサイトにCMSとしての管理UIを提供するNetlify CMSというツールがあることを知ったので試してみました。

(削除済み) https://www.netlifycms.org/

セットアップ

Netlify CMSでは既存のサイトに機能を追加させることもできますが、今回はお試しなのでNetlifyが用意するテンプレートを使いサイトに機能が組み込まれた状態からセットアップしてみました。

最初にNetlify CMSのサイトにアクセスし「GET STARTED」のボタンをクリックしていきます。

するとNetlifyで対応している静的サイトジェネレーターを使ったテンプレートサイトが4つ(Hugo、GatsbyJS、Middleman、Preact CLI)用意されてますので好きなテンプレートを選び「Deploy to netfiy」のボタンをクリックします。

私は普段Hugoを使うので本記事ではHugoのテンプレートを選択しました。

するとサイト作成のウィザードが開始されますので「Connect to GitHub」のボタンをクリックします。

GitHubにログインしている状態だとNetlifyのサービスがアクセス権を要求してきますので「Authrize netlify」のボタンをクリックします。
(GitHubアカウントを持ち、事前にログイン済みの前提です)

テンプレートをデプロイするリポジトリ名を入力し「Save & Deploy」ボタンをクリックします。
リポジトリ名はデフォルトの「one-click-hugo-cms」のままとしていますがここは作るサイトに応じた適切な名前にする必要があります。

これでリポジトリにテンプレートのソースコードがデプロイされ、同時にNetlifyの管理画面に遷移します。

サイトが作成されるまでしばらく時間がかかるのでそのまま待ちます。

サイトが作成されると下図の様にサイト独自のURL(今回は https://kind-mcnulty-f93b42.netlify.com)が与えられます。

このURLにアクセスするとテンプレートのコーヒー販売店のサイトが表示されます。(日本のKALDI COFFE FARMとは無関係の架空の企業サイトです。初見で誤認して少し焦りました...)

GitHubのリポジトリを確認するとこの様にソースコードがデプロイされています。

これで初期セットアップは完了です。

Netlify CMSを試す

セットアップが完了した時点でGitHubのアカウントと紐づくメールアドレスにNetlify CMSへの招待メールが届くので「Accept the invite」をクリックして承認します。
(Netlify CMSではGitHubアカウント情報からこのメールアドレスを持つ管理者ユーザーが作成されます)

初期パスワードの登録を要求されるので適切なパスワードを設定し「Sign up」をクリックします。

パスワードを設定しログイン状態になれば完了です。

管理コンソールはhttps://<サイトのURL>/admin/にアクセスするとログインできます。

ログインすると以下の様な画面になり、「Post」では個別のBlog記事を管理、「Pages」ではサイトのデザインを管理することができます。

Blog記事を投稿する

Post一覧画面の上部にある「New Post」ボタンをクリックすると記事の作成画面に遷移します。

画面左の各項目にテキストを入力すると右側でリアルタイムプレビューされるリッチなつくりとなっています。
記事本文のBODY欄はRich Text形式、Markdown形式の入力を切り替えて使えました。(ただ現時点では日本語入力に若干難がある様で漢字変換などで入力を確定させる際にキャレットの位置がおかしくなることが多々ありました...この点は今後改善されることを期待します)

記事を書き終えたら「Publish」ボタンから「Publish now」を選択することで記事を公開できます。

記事を公開すると自動でGitHubに新しい記事が追加されコミットされます。

その後Netlifyへのデプロイが開始される形となるため実際にサイトで確認できる様になるまでには若干のラグが発生します。
少し待ってからサイトを確認すると無事記事が追加されました。

サイトのデザインを変える

管理画面の「Pages」欄ではテンプレートで用意されている各種ページのデザインを変更できます。

このテンプレートでは

• Home Page
• Contact Page
• Product Page
• Values Page

の4つのデザインが設定可能となっていました。

今回は一番上の「Home Page」をクリックしてサイトのホームページを変更してみます。
前項同様こちらも画面左側で各要素を変更し右側でプレビューされる作りとなっています。

今回はこんな感じで適当に変えてみました。背景画像もばっちり変更できます。

画面上部の「Publish」ボタンから「Publish now」を選択することで変更を確定させます。

この場合も前項同様に自動でGitHubに新しい記事が追加されコミット、Netlifyへのデプロイという流れになります。

サイトにアクセスすると無事新しいデザインになりました。

メディア管理

管理画面上部の「Media」ボタンでサイトに登録されている画像ファイルなどのメディア一覧を管理できます。

その他機能

Netlify CMSの機能としてはざっくりこんな感じです。
Netlifyで提供されているその他の機能とNetlify CMSの関連は以下の様になっています。

ユーザー管理

Netlify CMSにアクセスできるユーザーはNetlifyのIdentityで管理されておりCMS側での管理機能は提供されていません。

Netlify CMSではこの他に複数の認証方式を選ぶことができる様です。

• Authentication & Backends

問い合わせフォーム

NetlifyにはNetlify Formsという問い合わせフォーム機能が提供されています。
フォームから送られたメッセージはNetlifyのSubmissionsで参照できますが、CMSから参照することは出来ません。

ただ、Netlify Formsでは受信した問い合わせを複数の方法で通知(Email、Slack、Webook)できますのでそこまで運用に支障をきたすことは無さそうです。

ちなみに今回のテンプレートにも問い合わせフォームは用意されていますが、初期状態では有効にされておらずフォームのソースコードを少し修正する必要があります。
細かい手順までは説明しませんが、該当フォームのformタグにnetlifyまたはdata-netlify="true"となる属性を設定すると有効になります。

• Forms setup

Analytics

Netlifyでは有料オプションでAnalytics機能を使えますが、CMSからその情報を参照することはできません。

Functions

こちらはCMSと全く関係ないのですがNetlifyには裏でAWS Lambdaの関数を実行してくれるFunctionsという機能があります。

• Functions overview

現時点では以下の制約がありますがちょっとした処理を実装する分には問題なさそうです。

• us-east-1 AWS Lambda region
• 1024MB of memory
• 10 second execution limit
• 無償プランでは 125,000 Requests per month, 100 Runtime per month まで利用可

価格について

最後に価格について触れておきます。

Netlify CMS自体は無料で利用できます。
Netlifyは利用する機能ごとに価格体系が決められておりNetlify CMSを含めて運用するサイト全体で利用する機能に応じた費用が発生します。(とはいえ大抵の機能は基本無料で使えます)

たとえば、Netlify CMSでは利用ユーザーにNetlifyのIdentityを使っていますが、Identityは無償プランであるLevel 0では最大5ユーザーまで利用することが可能で、5人以上利用する場合は有償のLevel 1にアップグレードする必要があります。(2020年2月14日現在)

価格の詳細は公式サイトで確認してください。

https://www.netlify.com/pricing/

終わりに

以上となります。
Netlify含めてNetlify CMSを初めて使ってみましたが、これだけの機能を手軽にデプロイし(大体無料で)利用できるというのは正直凄いと思いました。